<template>
	<view class='fater-nav'>
		<view class="pl-30 pr-30">
			<view class="pb-24">
				<text class="font-36 font-color font-bold">{{ title }}</text>
			</view>
			<view class="video-nav">
				<view class="video-item" v-for="item in videoList" :key="item.id" @click="toVideoDetail(item)">
					<template v-if="item.classify_title">
						<view class="top-icon">
							<text>{{ item.classify_title }}</text>
						</view>
					</template>
					<u-image :showLoading="true" :src="item.oss_object.url" width="100%" height="296rpx" radius="16rpx"></u-image>
					<text class="font-28 font-color font-bold mt-16 text-ellipsis">{{ item.title }}</text>
					<text class="font-24 font-color-3 mt-4">共{{ item.total_plot_num }}集</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  name: 'VideoList',
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      default: '本周精选'
    },
    videoList: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    toVideoDetail(item) {
      // if (item.tv_id) {
      //   const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
      //   item = tvinfo.result.data[0]
      // }
      // vk.vuex.set('$app.currenttv', item)
      // uni.navigateTo({ url: '/pages/player/player?id=' + item._id + '&series=' + item.series, })
      const { id } = item
      uni.navigateTo({ url: `/pages/player/player?library_id=${id}` })
    },
  }
}
</script>

<style lang="scss" scoped>
	.fater-nav {
		min-height: 420rpx;
	}
	.video-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.video-item {
			width: 32%;
			display: flex;
			flex-direction: column;
			position: relative;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
		}
		.top-icon {
			position: absolute;
			width: 66rpx;
			height: 36rpx;
			right: 0;
			top: 0;
			color: #fff;
			background-image: url('/static/images/video-top-back.png');
			background-size: 100% 100%;
			z-index: 2;
			text {
				position: absolute;
				width: fit-content;
				height: fit-content;
				font-size: 24rpx;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				transform: scale(0.8);
			}
		}
	}

	.video-nav::after {
		content: '';
		width: 32%;
	}
</style>
